.graph_wrapper__height {
	height: 100%;
}

.tableRelation_graph {
	flex: 1;
	text-align: center;
	height: 100%;
	background: inherit;
	position: relative;

	.graph-text__center {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		font-size: 16px;
	}

	.graph-editor {
		position: relative;
		height: 100%;
		flex: 1;
		text-align: center;
		.graph_loading {
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			background: rgba(255, 255, 255, 0.5);
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: 1000;
			clear: both;
			overflow: hidden;
		}
		.graph_toolbar {
			position: absolute;
			right: 3px;
			top: 4px;
			width: 36px;
			height: 107px;
			text-align: center;
			.basic_bar {
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 2px 8px 0px rgba(63, 135, 255, 0.2);
			}
			.spread_bar {
				position: relative;
				margin-top: 10px;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 2px 8px 0px rgba(63, 135, 255, 0.2);
			}
			.toolbar-icon {
				cursor: pointer;
				width: 34px;
				height: 34px;
				line-height: 34px;
				color: #979797;
				font-size: 20px;
				border-bottom: 1px solid #e8e8e8;
				&.active {
					color: #3f87ff;
				}
			}
			.outlineContainer {
				width: 240px;
				display: none;
				position: absolute;
				top: 0px;
				right: 36px;
				height: 160px;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 2px 8px 0px rgba(63, 135, 255, 0.2);
				.outline_title {
					display: flex;
					justify-content: space-between;
					padding: 10px;
					border-bottom: 1px solid #e8e8e8;
					.name {
						font-size: 12px;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: rgba(51, 51, 51, 1);
						line-height: 17px;
					}
					.double-right {
						cursor: pointer;
						font-size: 12px;
						color: #666666;
					}
				}
				.outline-content {
					height: 128px;
				}
				&.active {
					display: block;
				}
			}
		}
		.graph_container {
			cursor: pointer;
			position: absolute;
			overflow: auto;
			top: 0px;
			left: 0px;
			bottom: 0px;
			right: 0px;
			padding: 40px;
			&::-webkit-scrollbar {
				display: none;
			}
			.t-vertext {
				width: 200px;
				text-align: left;
				background: #fafafa;
				box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
			}
			.vertex-wrap {
				background: rgba(255, 255, 255, 1);
				// border-radius:4px;
				width: 280px;
				user-select: none;
				.vertex-title {
					height: 36px;
					line-height: 36px;
					border-radius: 4px 4px 0 0;
					color: #ffffff;
					padding: 0 0 0 12px;
					background: linear-gradient(
						298deg,
						rgba(90, 203, 255, 1) 0%,
						rgba(36, 145, 247, 1) 100%
					);
					.t_title {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						float: left;
						.expand_img {
							width: 16px;
							height: 16px;
							float: right;
							margin: 10px 11px 0 0;
						}
					}
				}
				.vertex-content {
					// 可能是和血缘分析 tab 的 class 重了，这里才加了个 height 🤔
					height: 198px;
					padding-right: 36px;
					font-size: 12px;
					border-radius: 0 0 4px 4px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(102, 102, 102, 1);
					background: #f1faff;
					.tcolumn {
						cursor: pointer;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						padding: 12px 15px 0 15px;
						margin-bottom: 8px;
						text-align: left;
					}
					.t-text-col {
						height: 30px;
						line-height: 30px;
						.t-text-col-key {
							float: left;
							text-indent: 12px;
							.t-text-col_img {
								width: 12px;
								height: 12px;
								margin: -2px 8px 0 0;
							}
						}
						.t-text-col-value {
							float: right;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: rgba(51, 51, 51, 1);
						}
					}
				}
				&.current {
					border: 1px solid #3f87ff;
					.vertex-title {
						background: #3f87ff;
					}
				}
				&.prev {
					border: 1px solid #26d6ae;
					.vertex-title {
						background: #26d6ae;
					}
				}
				&.next {
					border: 1px solid #7460ef;
					.vertex-title {
						background: #7460ef;
					}
				}
			}
		}
		.graph-legend {
			position: absolute;
			left: 50%;
			bottom: 20px;
			display: flex;
			transform: translateX(-52%);
			.legend-item {
				display: inline-block;
				vertical-align: middle;
				width: 12px;
				height: 12px;
				margin-right: 8px;
				margin-left: 40px;
			}
		}
	}
}
